<!--
 * @Author: dfh
 * @Date: 2024-03-20 11:06:40
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="card-list">
        <view class="card-item" @click="navigateTo(item.id)" v-for="(item,index) in data" :key="index">
            <image :src="item.bankIcon" class="bank-card" mode="widthFill" />
            <view class="txt-black-34 txt-28 mt-20">{{ item.name }}</view>
            <view class="flex ai-center mt-10">
                <text class="txt-black-102 mt-6 txt-22 mr-8">成功率</text>
                <RateWidget :rate="item.successRate"/>
            </view>
        </view>
    </view>
</template>

<script setup>
import RateWidget from '@/components/rate-widget';
defineProps({
    data:{
        type:Array,
        default:()=>[]
    }
})
const navigateTo=(id)=>{
    uni.navigateTo({url:`/pages/bankCard/detail?id=${id}`})
}
</script>

<style lang="scss" scoped>
.card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .card-item {
        display: flex;
        flex-direction: column;
        margin-top: 20rpx;
        width: 48%;
        background-color: white;
        border-radius: 30rpx;
        padding: 20rpx;
        box-sizing: border-box;

        .bank-card {
            width: 100%;
            height: 160rpx;
            border-radius: 20rpx;
        }
    }

    .card-item:nth-child(2n) {
        margin-left: 2%;
    }

    .card-item:nth-child(2n+1) {
        margin-right: 2%;
    }
}
</style>